<script setup>
import { ref, onMounted, reactive } from 'vue'
import { loginApi } from '../../api/index'
import { useRouter } from 'vue-router'
import { showNotify, closeNotify } from 'vant';
const router = useRouter()
const ruleForm = reactive({
    Code: '',
})
const onSubmit = async function () {
    const form = {
        Code: ruleForm.Code,
    }
    const res = await loginApi(form)
    if (res.data.code == 0) {
        localStorage.setItem('token', res.data.data.token)
        router.push({ path: '/Admin' })
        showNotify({ type: 'success', message: '登录成功' });
    } else {
         showNotify(res.data.msg);
    }
}

// // 生成验证码
// const newrn = function () {
//     let c1 = document.getElementById("cvs")
//        let ctx = c1.getContext('2d');
//        let w = 120;
//        let h = 30;
//        c1.width = w;
//        c1.height = h;
//        //填充背景颜色
//        ctx.fillStyle = rc(180,230);
//        ctx.fillRect(0,0,c1.width,c1.height);
//        ctx.textBaseline = 'top';
//        //绘制随机的字符
//        let pool = 'ABCDEFGHJKLMNPQRSTUVWXY3456789';
//        for(let i=0;i<4;i++){
//         let c = pool[rn(0,pool.length)];//下标随机取出
//            let fs = rn(15,35);//随机的字体大小
//            let deg = rn(-45,45);//随机的旋转角度
//            ctx.font = fs+'px SimHei';
//            ctx.fillStyle = rc(80,180);
//            ctx.save();//存盘
//            ctx.translate(30*i+15, 15);
//            ctx.rotate(deg*Math.PI/180);
//            ctx.fillText(c,-15+5,-15);
//            ctx.restore();//恢复存盘
//        }

//        //绘制6条干扰线
//        for(let i=0;i<6;i++){
//            ctx.strokeStyle = rc(0,255);
//            ctx.beginPath();
//            ctx.moveTo(rn(0, w), rn(0, h));
//            ctx.lineTo(rn(0, w), rn(0, h));
//            ctx.stroke();
//        }

//        //绘制50个杂色点-半径为0.5的圆形，填充
//        for(let i=0;i<50;i++){
//            ctx.fillStyle = rc(0,255);
//            ctx.beginPath();
//            ctx.arc(rn(0,w), rn(0,h),  0.5, 0, 2*Math.PI);
//            ctx.fill();
//        }

//        //random number：返回指定范围内的随机整数
//        function rn(min,max){
//            let n = Math.floor(Math.random()*(max-min)+min);
//            return n;
//        }
//        //random color：返回指定范围内的随机颜色
//        //形如：rgb(x,x,x)
//        function rc(min, max){
//            let r = rn(min, max);
//            let g = rn(min, max);
//            let b = rn(min, max);
//            return `rgb(${r},${g},${b})`;
//     }
// }
onMounted(() => {
    // newrn()
})
</script>
<template>
   <div class="contaniner">
    <div class="box">
        <div class="boxtop">
            <img src="../../img/LOGO.svg" style="width:5.3333rem;height:5.3333rem" alt="">
        </div>
        <div class="boxbtn">
            <!-- <canvas id="cvs" @click="newrn" style="width: 3.2rem;height:.9333rem"></canvas> -->
            <van-form @submit="onSubmit">
                <van-field
                    v-model.number="ruleForm.Code"
                    type="number"
                    name="代码"
                    label="代码"
                    left-icon="coupon"
                    placeholder="代码"
                    :rules="[{ required: true, message: '请填写代码' }]"
                > 
            </van-field>
                <div style="margin:1.3333rem;">
                    <van-button  block style="background-color: #EFCB7B;font-size: .3733rem;font-weight: 600;" native-type="submit">登录</van-button>
                </div>
            </van-form>
           
        </div>
    </div>
   </div>
</template>

<style scoped>
:deep(.van-cell){
    border-bottom: .0533rem solid #F5F5F6;
}
.contaniner{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.box{
    width: 9.3333rem;
    height: 9.3333rem;
}
.boxtop{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 6rem;
    margin-bottom: .8rem;
}
.boxbtn{

}
</style>